@charset "utf-8";
/* Created By Nicky */

@font-face {    
	font-family: jb;    
	src: url( ../font/jb.otf) ; 
	src: url( ../font/jb.otf) format("truetype");   
	font-weight:100;
}

body,p,li,ul,dl,dd,h1,h2,h3,h4{ margin:0px; padding:0px; }
body{ width:100%; height:100%; overflow:hidden; }
li{ list-style:none; }
a{ text-decoration:none; }

#bg{ z-index:-1; }
.pg{ position:absolute; top:0px; left:0px; width:100%; height:100%; }
.w{ width:100%; }
.h{ height:100%; }
.ab{ position:absolute; }
.hd{ display:none; }
#load{ z-index:50; }
#load p{ }
#load_txt{ top:46%; text-align:center; padding-left:5px; color:rgba(255,255,255,0.9); font-family:jb;   }

#sc{ z-index:999; display:none; background-color:rgba(110,20,30,0.9); }
#sc table,#sc table td{ width:100%; height:100%; text-align:center; vertical-align:middle;  }
#sc table td img{ max-width:60%; max-height:60%; }

#logo{ width:40%; left:30%; top:8%; text-align:center; position:absolute; z-index:500; }

@keyframes indexpoint  { 
	0% {  transform:translateY(0px); opacity:0;  -webkit-transform:translateY(0px); } 
	10% {  transform:translateY(-5px); opacity:0;  -webkit-transform:translateY(-5px); } 
	20% {  transform:translateY(-10px); opacity:1;  -webkit-transform:translateY(-10px); } 
	60% {  transform:translateY(-20px); opacity:1;  -webkit-transform:translateY(-20px); } 
	70% {  transform:translateY(-25px); opacity:0;  -webkit-transform:translateY(-25px); } 
	90% {  transform:translateY(-30px); opacity:0; -webkit-transform:translateX(-30px); } 
	100% {  transform:translateY(0px); opacity:0; -webkit-transform:translateX(0px); } }
@-webkit-keyframes indexpoint  { 
	0% {  transform:translateY(0px); opacity:0;  -webkit-transform:translateY(0px); } 
	10% {  transform:translateY(-5px); opacity:0;  -webkit-transform:translateY(-5px); } 
	20% {  transform:translateY(-10px); opacity:1;  -webkit-transform:translateY(-10px); } 
	60% {  transform:translateY(-20px); opacity:1;  -webkit-transform:translateY(-20px); } 
	70% {  transform:translateY(-25px); opacity:0;  -webkit-transform:translateY(-25px); } 
	90% {  transform:translateY(-30px); opacity:0; -webkit-transform:translateX(-30px); } 
	100% {  transform:translateY(0px); opacity:0; -webkit-transform:translateX(0px); } }
	
.indexpoint{ bottom:0px; animation:indexpoint 3s linear infinite ; -webkit-animation:indexpoint 3s linear infinite ; }

@keyframes music_btn_move  { 
	0% {  transform:rotate(0deg); -webkit-transform:rotate(0deg); } 
	25% {  transform:rotate(-40deg); -webkit-transform:rotate(-40deg); }  
	75% {  transform:rotate(40deg); -webkit-transform:rotate(40deg); } 
	100%{  transform:rotate(0deg); -webkit-transform:rotate(0deg); }   }
@-webkit-keyframes music_btn_move {
	0% {  transform:rotate(0deg); -webkit-transform:rotate(0deg); } 
	25% {  transform:rotate(-40deg); -webkit-transform:rotate(-40deg); }  
	75% {  transform:rotate(40deg); -webkit-transform:rotate(40deg); } 
	100%{  transform:rotate(0deg); -webkit-transform:rotate(0deg); }   }
.music_btn_on{ animation:music_btn_move 3s linear infinite ; -webkit-animation:music_btn_move 3s linear infinite ; }
.music_btn{ z-index:500; position:absolute; display:none; width:30px; top:20px; right:10px; }

#framebox{ display:none; top:-5%; height:110%;  }

.click_btn{ bottom:4%; text-align:center; display:none;  } 
.touch_txt{ width:60%; }

@keyframes touch_hand_move  { 
	0% {  transform:translateX(-40px); opacity:0;  -webkit-transform:translateX(-40px); } 
	30% {  transform:translateX(0px); opacity:1; -webkit-transform:translateX(0px); } 
	65% { transform:translateX(40px); opacity:1; -webkit-transform:translateX(40px); }
	70% { transform:translateX(45px); opacity:0; -webkit-transform:translateX(45px); }
	100% { transform:translateX(-40px); opacity:0; -webkit-transform:translateX(-40px); } }
@-webkit-keyframes touch_hand_move {
	0% {  transform:translateX(-40px); opacity:0;  -webkit-transform:translateX(-40px); } 
	30% {  transform:translateX(0px); opacity:1; -webkit-transform:translateX(0px); } 
	65% { transform:translateX(40px); opacity:1; -webkit-transform:translateX(40px); }
	70% { transform:translateX(45px); opacity:0; -webkit-transform:translateX(45px); }
	100% { transform:translateX(-40px); opacity:0; -webkit-transform:translateX(-40px); } }
 
.touch_hand{ margin-top:5px; width:40px; animation:touch_hand_move 3s linear infinite ; -webkit-animation:touch_hand_move 3s linear infinite ; }


#vplaybtn{ display:inline-block; display:none; position:absolute; z-index:10; top:30%; left:30%; width:180px; height:180px; background:url(../img/vplay.png) center no-repeat; background-size:100% 100%; }
#vplaybtnsc,#vplaybtnbg{ position:absolute; display:inline-block; z-index:9;  display:none; }

#vplaybtnsc{ transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); background:url(../img/start_btn_sc.png) center no-repeat; background-size:100% 100%; }
#vplaybtnbg{ transform:scale(1.2,1.2); -webkit-transform:scale(1.2,1.2); background:url(../img/start_btn_bg.png) center no-repeat; background-size:100% 100%;  } 

@keyframes vplaybtnsc_img { 
	0% {  transform:rotate(0deg); -webkit-transform:rotate(0deg); }  
	100%{  transform:rotate(360deg); -webkit-transform:rotate(360deg); }  }
@-webkit-keyframes vplaybtnsc_img {
	0% {  transform:rotate(0deg); -webkit-transform:rotate(0deg); }  
	100%{  transform:rotate(360deg); -webkit-transform:rotate(360deg); }  }
#vplaybtnsc{ animation:vplaybtnsc_img 3s linear infinite ; -webkit-animation:vplaybtnsc_img 3s linear infinite ; }

@keyframes vplaybtnbgimg  { 
	5% {  transform:scale(1,1);   opacity:0; -webkit-transform:transform:scale(1,1); } 
	5% {  transform:scale(1,1);   opacity:1; -webkit-transform:transform:scale(1,1); }  
	70%{  transform:scale(1.3,1.3);  opacity:1; -webkit-transform:transform:scale(1.3,1.3); } 
	100%{  transform:scale(1.5,1.5);  opacity:0; -webkit-transform:transform:scale(1.5,1.5); }  }
@-webkit-keyframes vplaybtnbgimg {
	5% {  transform:scale(1,1);   opacity:0; -webkit-transform:scale(1,1); }  
	5% {  transform:scale(1,1);   opacity:1; -webkit-transform:scale(1,1); }  
	70%{  transform:scale(1.3,1.3);  opacity:1; -webkit-transform:scale(1.3,1.3); } 
	100%{  transform:scale(1.5,1.5);  opacity:0; -webkit-transform:scale(1.5,1.5); }  } 
#vplaybtnbg{ animation:vplaybtnbgimg 2s linear infinite ; -webkit-animation:vplaybtnbgimg 2s linear infinite ; }

#torecord{ position:absolute; display:none; bottom:5%; width:100%; left:0px; text-align:center; }
#torecordBtn{ width:50%;  }

#door{ z-index:10; }

#outtime{ display:none; }
#outtimediv{  position:absolute; display:none; bottom:10%; width:100%; left:0px; text-align:center;  }
#outtimediv div img{ width:50%; }
.torecordBtn1{ margin-top:15px; }
#overimg{ right:100%; }
/*
#logo img{ width:100%; }





#start_btn_box{ position:absolute; top:40%; left:30%; z-index:10; width:120px; height:120px; }
#start_btn_box img{ position:absolute; left:0px; top:0px; width:100%; height:100%; }

@keyframes start_btn_sc  { 
	0% {  transform:rotate(0deg); -webkit-transform:transform:rotate(0deg); }  
	100%{  transform:rotate(360deg); -webkit-transform:transform:rotate(360deg); }  }
@-webkit-keyframes start_btn_sc {
	0% {  transform:rotate(0deg); -webkit-transform:transform:rotate(0deg); }  
	100%{  transform:rotate(360deg); -webkit-transform:transform:rotate(360deg); }  }
	
#start_btn_box img.start_btn_sc_on{ animation:start_btn_sc 3s linear infinite ; -webkit-animation:start_btn_sc 3s linear infinite ; }

#all{ display: none; }
#load p{ position: absolute; letter-spacing:1px; font-family:'Arial,Helvetica,sans-serif'; top:47%; left:3%; width:96%; color:rgba(255,255,255,0.9); text-align: center; }
@keyframes start_btn_bg  { 
	5% {  transform:scale(0.8,1);   opacity:0; -webkit-transform:transform:scale(0.8,1); }  
	5% {  transform:scale(1,1);   opacity:1; -webkit-transform:transform:scale(1,1); }  
	70%{  transform:scale(1.3,1.3);  opacity:1; -webkit-transform:transform:scale(1.3,1.3); } 
	100%{  transform:scale(1.5,1.5);  opacity:0; -webkit-transform:transform:scale(1.5,1.5); }  }
@-webkit-keyframes start_btn_bg {
	5% {  transform:scale(0.8,1);   opacity:0; -webkit-transform:transform:scale(0.8,1); }  
	5% {  transform:scale(1,1);   opacity:1; -webkit-transform:transform:scale(1,1); }  
	70%{  transform:scale(1.3,1.3);  opacity:1; -webkit-transform:transform:scale(1.3,1.3); } 
	100%{  transform:scale(1.5,1.5);  opacity:0; -webkit-transform:transform:scale(1.5,1.5); }  }
	
#start_btn_box img.start_btn_bg_on{ animation:start_btn_bg 2s linear infinite ; -webkit-animation:start_btn_bg 2s linear infinite ; }
.view_sound_btn{ display:none; }
*/